<template> 
  <div class="main-container">
    <!-- 标题框 -->
    <div class="header-container">
      <div class="header-box">
        <button @click="goBack" class="btn btn-back">返回</button>
        <h1 class="title">青铜鉴定</h1>
      </div>
    </div>

    <!-- 内容框 -->
    <div class="content-container">
      <!-- 内容框，包含功能介绍和原始图 -->
      <div class="content-box">
        <!-- 功能介绍文字，封装在一个深色、有圆角的框内 -->
        <div class="introduction-box">
          <p class="introduction-text">
            上传一张古青铜器的图片，即可获得特征分析图和对应特征点的解释
          </p>
          <p class="note-text">
            （注：请选取正面角度拍摄的铜器照片，尽量简化背景元素）
          </p>
          <p class="available-types">
            目前开放类：<strong>鼎</strong>
          </p>
        </div>

        <!-- 原始图 -->
        <h3 class="image-title">原始图</h3>
        <div class="image-box">
          <div class="image-content">
            <img v-if="selectedImagePreview" :src="selectedImagePreview" alt="Selected Image" class="preview-image" />
            <div v-else class="placeholder" @click="selectImage">
              <p>点击选择图片</p>
            </div>
            <!-- 处理中覆盖层 -->
            <div v-if="processing" class="processing-overlay">
              <div class="progress-bar">
                <div class="progress" :style="{ width: progress + '%' }"></div>
              </div>
              <p class="processing-text">处理中... {{ progress }}%</p>
            </div>
          </div>
        </div>
        <input type="file" @change="handleFileUpload" ref="fileInput" accept="image/*" style="display: none;" />

        <!-- 上传和重新上传按钮 -->
        <div class="upload-buttons">
          <button v-if="selectedImagePreview && !processing && !showResult" @click="startProcessing" class="btn btn-upload">上传并识别</button>
          <button v-if="selectedImagePreview && !processing" @click="resetUpload" class="btn btn-reupload">重新上传</button>
        </div>
      </div>

      <!-- 鉴定报告框 -->
      <div v-if="showResult">
        <div class="result-box">
          <!-- 鉴定报告标题 -->
          <h1 class="report-title">鉴定报告</h1>
          
          <!-- 预测图和标签解释放在一个棕色的框里 -->
          <div class="prediction-section">
            <!-- 预测图 -->
            <h3 class="image-title">预测图</h3>
            <div class="image-box result-image" @click="openModal(resultPath)">
              <img :src="resultPath" alt="Prediction Result" class="preview-image" />
              <button @click.stop="downloadImage(resultPath, '预测图')" class="btn-download">
                <DownloadIcon size="20" />
              </button>
            </div>
            <!-- 标签解释 -->
            <div class="labels-container">
              <ul>
                <li v-for="label in labels" :key="label">
                  <span class="label-text">{{ label }}</span>
                  <span class="label-explanation">{{ getLabelExplanation(label) }}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <!-- 模态框 -->
      <div v-if="modalVisible" class="modal" @click="closeModal">
        <div class="modal-content" @click.stop>
          <img :src="modalImage" alt="Enlarged Image" class="modal-image" />
          <button @click="closeModal" class="btn-close">
            <XIcon size="24" />
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { DownloadIcon, XIcon } from 'lucide-vue-next';
import { BASE_URL } from '@/config.js';

export default {
  components: {
    DownloadIcon,
    XIcon,
  },
  data() {
    return {
      selectedFile: null,
      selectedImagePreview: null,
      resultPath: null,
      processing: false,
      progress: 0,
      showResult: false,
      modalVisible: false,
      modalImage: null,
      labels: [],
      fromSection: null,
    };
  },
  mounted() {
  this.fromSection = this.$route.query.fromSection;
  // ... other mounted logic
  },
  methods: {
    selectImage() {
      this.$refs.fileInput.click();
    },
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0];
      this.createImagePreview();
    },
    createImagePreview() {
      if (this.selectedFile) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.selectedImagePreview = e.target.result;
        };
        reader.readAsDataURL(this.selectedFile);
      }
    },
    startProcessing() {
      this.processing = true;
      this.progress = 0;
      this.showResult = false;
      this.simulateProgress();
      this.uploadAndPredict();
    },
    simulateProgress() {
      const interval = setInterval(() => {
        if (this.progress < 100) {
          this.progress += 10;
        } else {
          clearInterval(interval);
        }
      }, 1000); // 每秒增加10%，持续10秒
    },
    async uploadAndPredict() {
      if (!this.selectedFile) return;
      const formData = new FormData();
      formData.append('image', this.selectedFile);
      try {
        const uploadResponse = await axios.post(`${BASE_URL}/api2/upload`, formData, {
          headers: { 'Content-Type': 'multipart/form-data' },
        });
        const uploadedFilename = uploadResponse.data.filename;

        const predictResponse = await axios.post(`${BASE_URL}/api2/predict`, { filename: uploadedFilename });
        this.resultPath = `${BASE_URL}${predictResponse.data.result_path}`;

        if (predictResponse.data.labels) {
          this.labels = predictResponse.data.labels;
        }

        // 确保处理时间至少为10秒
        setTimeout(() => {
          this.processing = false;
          this.showResult = true;
        }, 10000);
      } catch (error) {
        console.error('处理失败:', error);
        alert('上传或识别过程中出现错误');
        this.processing = false;
      }
    },
    resetUpload() {
      // 清除任何可能的定时器（如果有）
      this.processing = false;
      this.progress = 0;
      this.showResult = false;
      this.selectedFile = null;
      this.selectedImagePreview = null;
      this.resultPath = null;
      this.labels = [];
      // 重置文件输入的值
      if (this.$refs.fileInput) {
        this.$refs.fileInput.value = null;
      }
    },
    goBack() {
      if (this.fromSection !== null) {
        this.$router.push({ name: 'Home', query: { scrollToSection: this.fromSection } });
      } else {
        this.$router.push({ name: 'Home' });
      }
    },
    openModal(imageSrc) {
      if (imageSrc) {
        this.modalImage = imageSrc;
        this.modalVisible = true;
      }
    },
    closeModal() {
      this.modalVisible = false;
      this.modalImage = null;
    },
    downloadImage(imageSrc, imageName) {
      const link = document.createElement('a');
      link.href = imageSrc;
      link.download = `${imageName}.jpg`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    getLabelExplanation(label) {
      const explanations = {
                // 在此处添加标签解释
        // 例如：
        '兽面纹带列旗脊云雷纹': '该纹饰由兽面纹（饕餮纹）组成，带有列旗状的脊线，周围装饰云雷纹，整体呈现出复杂而庄重的艺术风格。',
    '兽面纹带省变': '该纹饰为简化后的兽面纹（饕餮纹），在保留主要特征的同时，省略了一些细节，使其更加简洁抽象。',
    '兽面纹带双体躯干': '该纹饰中的兽面纹（饕餮纹）表现为拥有双重躯干的形态，两个身体相互结合，体现了双体结构的复杂性和独特性。',
    '兽面纹带其他或看不清的': '此纹饰包含了其他形式的兽面纹（饕餮纹），由于磨损、腐蚀或制作工艺的原因，图案可能不够清晰，难以辨认其具体细节。',
    '兽面纹尾上卷': '该纹饰中的兽面纹（饕餮纹）尾部向上卷曲，增加了纹饰的动感和生动性，体现了古代工匠对动物形态的独特理解。',
    '兽面纹尾下卷': '该纹饰中的兽面纹（饕餮纹）尾部向下卷曲，表现出纹饰的流畅性和对称美，增强了整体的艺术效果。',
    '兽面纹独体': '该纹饰以单独一个兽面纹（饕餮纹）为主体，突出其独特的造型和神秘的气质。',
    '兽面纹分解': '将兽面纹（饕餮纹）的元素进行分解和重组，形成新的纹饰，体现了创作者的想象力和创新精神。',
    '兽面纹有火纹': '在兽面纹（饕餮纹）中加入火焰状的纹饰，象征着力量和能量的迸发，增强了视觉冲击力。',
    '兽面纹其他': '其他形式的兽面纹（饕餮纹）装饰，可能包含不同的细节和变化，展现出多样化的艺术表现。',
    '足部兽首': '器物的足部装饰有兽首形状的纹饰，增加了器物的庄重感和威严感。',
    '夔龙纹直身': '夔龙纹以直立的身体形式出现，线条刚劲有力，体现了夔龙的神秘与威严。',
    '夔龙纹低头卷尾': '夔龙纹呈现低下头部、尾巴卷曲的形态，增添了纹饰的动态感和生动性。',
    '夔龙纹曲身拱背': '夔龙纹身体弯曲、背部拱起，体现了优美的线条和流畅的曲线美感。',
    '夔龙纹卷鼻': '夔龙纹的鼻子呈卷曲状，增加了纹饰的独特性和细节丰富性。',
    '夔龙纹卷曲': '夔龙纹整体呈卷曲形态，线条柔美，体现了古代艺术家对线条美的追求。',
    '交龙纹': '两条龙交织在一起的纹饰，象征着力量的融合和协作，增加了纹饰的复杂性。',
    '龙纹单首双身': '一条龙的头部，连接着双重身体的纹饰，表现出奇特的想象力和艺术性。',
    '卷龙纹': '龙的身体呈卷曲状的纹饰，线条优美，富有动感。',
    '顾龙纹折身': '顾龙纹的身体呈折叠状，头部回顾，体现了龙的灵动与威严。',
    '顾龙纹其他斜身拱背双首': '其他形式的顾龙纹，如斜身、拱背、双首等，展现了多样的艺术风格和创新。',
    '顾龙纹分体': '将顾龙纹的元素进行分解，形成新的纹饰，体现了创作者的独特视角。',
    '蟠螭纹': '盘绕的螭龙纹饰，线条流畅，富有装饰性和艺术性。',
    '蟠虺纹': '盘绕的虺纹（小龙）纹饰，精致细腻，体现了古代工匠的高超技艺。',
    '直立鸟纹': '以直立姿态表现的鸟纹饰，形象生动，富有象征意义。',
    '小鸟纹': '描绘小型鸟类的纹饰，精巧可爱，增加了器物的活泼性。',
    '回首的小鸟纹': '小鸟回头张望的姿态纹饰，富有情趣和动感。',
    '长尾鸟纹': '尾巴较长的鸟形纹饰，线条流畅，体现了优美的姿态。',
    '分离C形尾长鸟纹': '尾部呈C形，元素分离的长尾鸟纹，增加了纹饰的层次感。',
    '分离S形尾长鸟纹': '尾部呈S形，元素分离的长尾鸟纹，体现了线条的流动性。',
    '大鸟纹昂首': '大型鸟纹，抬头挺胸的姿态，展现了雄伟和自信。',
    '大鸟纹回首': '大型鸟纹，回头望的姿态，富有动感和故事性。',
    '鸟首龙身': '鸟的头部和龙的身体组合的纹饰，体现了想象力和艺术融合。',
    '鸟首龙身纹回首': '鸟首龙身纹中，鸟首回顾的姿态，增加了纹饰的生动性。',
    '龙首鸟身': '龙的头部和鸟的身体组合的纹饰，展现了独特的创意和艺术表现。',
    '蛇纹': '以蛇为主题的纹饰，线条蜿蜒，象征着灵活和智慧。',
    '蝉纹': '以蝉为主题的纹饰，象征着长寿和再生，具有吉祥意义。',
    '连续的蝉纹': '多个蝉纹连续排列的纹饰，形成规律性的装饰效果。',
    '蝉纹足': '在器物足部装饰有蝉纹，增加了器物的文化内涵。',
    '象纹': '以大象为主题的纹饰，象征着力量和稳重。',
    '四瓣目纹': '四瓣花形的眼睛纹饰，增加了纹饰的精致感。',
    '斜角目纹': '眼睛呈斜角形状的纹饰，体现了独特的艺术风格。',
    '目云纹': '眼睛和云纹结合的纹饰，增加了图案的丰富性。',
    '重环纹': '重叠的环形纹饰，形成立体感和层次感。',
    '鳞纹': '类似鱼鳞的纹饰，排列紧密，具有装饰性。',
    '分离的分解兽面窃曲纹': '将兽面纹分解，形成窃曲状的分离纹饰，体现了创新和变化。',
    '有省变的分解兽面纹': '简化后的分解兽面纹饰，在保留基本形态的同时增加了新的元素。',
    '夔龙纹演变的窃曲纹': '由夔龙纹演变而来的窃曲纹饰，体现了纹饰的传承和发展。',
    'S形窃曲纹': '呈S形的窃曲纹饰，线条优美，富有动感。',
    'U形窃曲纹': '呈U形的窃曲纹饰，结构简洁，富有装饰性。',
    'G形窃曲纹': '呈G形的窃曲纹饰，独特新颖，增加了视觉兴趣。',
    '其他窃曲纹': '其他形式的窃曲纹饰，展现了多样的艺术风格。',
    '普通云雷纹': '常见的云雷纹饰，具有传统特色，象征着祥瑞。',
    '勾连雷纹': '雷纹之间相互勾连的纹饰，形成连续的装饰效果。',
    '乳钉雷纹': '结合乳钉纹的雷纹饰，增加了立体感和层次感。',
    '斜角云纹': '呈斜角形状的云纹饰，线条流畅，富有动感。',
    '菱格雷纹': '菱形格子的雷纹饰，结构规整，富有装饰性。',
    '圆涡纹': '圆形漩涡状的纹饰，象征着旋转和循环。',
    '乳钉纹': '凸起如乳头状的纹饰，增加了器物的立体感。',
    '三角纹': '三角形的纹饰，结构简单，富有节奏感。',
    '蕉叶纹': '形似蕉叶的纹饰，线条优美，富有自然气息。',
    '直棱纹': '直线棱状的纹饰，增加了器物的立体感和硬朗气质。',
    '圆圈纹': '由圆圈组成的纹饰，结构简单，富有装饰效果。',
    '山纹': '类似山峰形状的纹饰，象征着稳固和高耸。',
    '弦纹': '环绕器物的线状纹饰，增加了器物的层次感。',
    '绳纹': '类似绳子编织的纹饰，象征着连接和团结。',
    '瓦纹': '类似瓦片排列的纹饰，结构规整，富有装饰性。',
    '兽面纹带分尾': '兽面纹（饕餮纹）的尾部分叉的纹饰，增加了图案的复杂性。',
    '散螭纹': '分散排列的螭龙纹饰，增加了纹饰的自由度和空间感。',
    '虎纹': '以老虎为主题的纹饰，象征着威猛和勇敢。',
    '鱼纹': '以鱼为主题的纹饰，象征着繁荣和富足。',
    '其他纹饰': '其他未分类的纹饰，可能包含多种元素和风格。',
    '托盘': '器物上的托盘结构，用于放置物品，增加了实用性。',
    '门窗型炉灶': '形似门窗的炉灶结构，具有独特的造型和功能性。',
    '普通炉灶': '常见形式的炉灶，用于烹饪或加热，体现了生活实用性。',
    '盖': '器物的盖子部分，用于保护内部物品，增加了器物的完整性。',
    '曲尺纽': '形似曲尺的纽状装饰，增加了器物的精致感。',
    '三环钮': '由三个环组成的钮状装饰，富有层次感和装饰性。',
    '平直扉棱': '平直的扉棱装饰，增加了器物的立体感和硬朗气质。',
    'F形扉棱': '形似字母F的扉棱装饰，独特新颖，增加了视觉兴趣。',
    '其他扉棱': '其他形式的扉棱装饰，展现了多样的艺术风格。',
    '立耳': '直立的耳状装饰，用于提拿或装饰，增加了器物的实用性和美观性。',
    '立耳外撇': '直立的耳状装饰向外倾斜，增加了器物的动感和造型美。',
    '附耳': '附加的耳状装饰，通常为小型装饰件，增加了器物的细节。',
    '附耳弯曲': '弯曲形态的附耳装饰，线条柔美，富有艺术性。',
    '附耳S形': '呈S形的附耳装饰，增加了器物的优美感。',
    '环耳': '环形的耳状装饰，用于提拿或装饰，实用且美观。',
    '夔龙形扁足': '扁平的足部，装饰有夔龙形状，增加了器物的文化内涵。',
    '鸟形扁足': '扁平的足部，装饰有鸟形纹样，增加了器物的生动性。',
    '锥足': '锥形的足部结构，稳定性好，增加了器物的立体感。',
    '柱足': '柱状的足部结构，稳固且美观，常见于青铜器。',
    '蹄足': '类似动物蹄子的足部，增加了器物的生动性和趣味性。',
    '蹄足短粗': '短而粗的蹄足结构，显得稳重扎实。',
    '蹄足外侈': '蹄足向外扩张的形态，增加了器物的稳定性和视觉张力。',
    '蹄足细长': '细长的蹄足结构，显得轻盈优雅。',
    '柱足上粗下细': '柱足上部粗壮，下部细小的形态，增加了器物的独特性。',
        // 其他标签的解释...
      };
      return explanations[label] || '没有该标签的解释。';
    },
  },
};
</script>

<style scoped>
/* 整体暗淡青铜主题样式 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Playfair+Display&display=swap');

/* 主容器 */
.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  background-image: url('@/assets/s2.jpg'); 
  background-repeat: no-repeat; /* 背景图不重复 */
  background-size: cover; /* 背景图覆盖整个区域 */
  background-position: center; /* 背景图居中 */
  background-attachment: fixed; /* 背景图固定 */
  margin: 0;
  padding: 0;
  min-height: 100vh; /* 确保背景图覆盖整个视口高度 */
}

/* 头部容器 */
.header-container {
  margin: 20px auto;
  width: 100%;
}

.header-box {
  margin-top: 52px;
  margin-left: 200px;
  margin-right: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #1c2827, #5e4b3c); /* 深绿色到深棕色的渐变 */
  border-radius: 20px;
  padding: 10px 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
}

.title {
  font-size: 32px; /* 增大标题字体 */
  font-weight: bold;
  color: #fdf6e3; /* 淡色字体 */
  margin: 0 10px;
  font-family: 'Playfair Display', serif;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

/* 返回按钮样式 */
.btn-back {
  background-color: #8b4513; /* 深棕色 */
  color: #fdf6e3;
  padding: 10px 20px;
  font-size: 18px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.btn-back:hover {
  background-color: #5e4b3c; /* 更深的棕色 */
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.7);
}

/* 内容容器 */
.content-container {
  width: 800px;
  margin: 0 auto;
}

/* 内容框 */
.content-box {
  padding: 20px;
  background-color: #2e2e2e; /* 深灰背景 */
  border-radius: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
}

/* 功能介绍文字的深色圆角框 */
.introduction-box {
  background: #3e2a1f; /* 深棕色背景 */
  border-radius: 15px;
  padding: 30px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
  animation: fadeIn 1s ease-in-out;
  text-align: center;
}

.introduction-box::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, transparent 0%, transparent 70%, rgba(255, 255, 255, 0.1) 100%);
  animation: rotate 30s linear infinite;
}

.introduction-text {
  font-family: 'Playfair Display', serif; /* 使用不同字体 */
  font-size: 20px; /* 较大的字体大小 */
  color: #fdf6e3; /* 淡色字体 */
  line-height: 1.8;
  margin: 0;
  position: relative; /* 确保文字在伪元素之上 */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* 增加文字阴影 */
  font-weight: 600; /* 适度加粗 */
  letter-spacing: 0.5px; /* 增加字间距 */
}

.note-text {
  font-family: 'Playfair Display', serif;
  font-size: 16px; /* 较小的字体大小 */
  color: #d4af37; /* 金色 */
  line-height: 1.5;
  margin-top: 15px; /* 与上面的文字保持一定距离 */
  opacity: 0.9; /* 稍微降低不透明度 */
  text-align: center;
}

.available-types {
  font-family: 'Montserrat', sans-serif; /* 使用不同字体 */
  font-size: 20px; /* 字体大小 */
  color: #d4af37; /* 金色 */
  line-height: 1.8;
  margin: 10px 0 0 0;
  position: relative; /* 确保文字在伪元素之上 */
  text-align: center; /* 居中对齐 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 更明显的文字阴影 */
  font-weight: 800; /* 更加加粗 */
  letter-spacing: 1px; /* 增加字间距 */
  transition: transform 0.3s, color 0.3s; /* 添加过渡效果 */
}

.available-types:hover {
  transform: scale(1.05); /* 鼠标悬停时放大 */
  color: #b89c34; /* 改变为更深的金色 */
}

/* 图片标题样式 */
.image-title {
  font-size: 18px;
  color: #fdf6e3; /* 淡色字体 */
  text-align: center;
  margin-bottom: 10px;
  font-family: 'Montserrat', sans-serif;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* 图片框样式 */
.image-box {
  width: 300px;
  height: 300px;
  background-color: #3e2a1f; /* 深棕色背景 */
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  margin: 0 auto 20px auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
}

.image-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  animation: fadeIn 0.5s ease-in-out;
  border-radius: 10px;
}

.placeholder {
  font-size: 18px;
  color: #d4af37; /* 金色 */
  cursor: pointer;
  animation: pulse 2s infinite;
}

.placeholder p {
  margin: 0;
}

/* 上传和重新上传按钮样式 */
.upload-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.btn-upload {
  background-color: #d4af37; /* 金色 */
  color: #2e2e2e; /* 深色字体 */
  padding: 12px 24px;
  font-size: 18px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.4);
}

.btn-upload:hover {
  background-color: #b89c34; /* 更深的金色 */
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.6);
}

.btn-reupload {
  background-color: #5e4b3c; /* 暗棕色 */
  color: #fdf6e3; /* 淡色字体 */
  padding: 12px 24px;
  font-size: 18px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 14px rgba(94, 75, 60, 0.4);
}

.btn-reupload:hover {
  background-color: #3e2a1f; /* 更深的棕色 */
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(94, 75, 60, 0.6);
}

/* 处理中覆盖层 */
.processing-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(94, 75, 60, 0.8); /* 半透明棕色 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
}

.progress-bar {
  width: 80%;
  height: 10px;
  background-color: #d4af37; /* 金色背景 */
  border-radius: 5px;
  margin-bottom: 10px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background-color: #8b4513; /* 深棕色 */
  width: 0%;
  transition: width 1s linear;
}

.processing-text {
  font-size: 18px;
  color: #fdf6e3; /* 淡色字体 */
  font-family: 'Montserrat', sans-serif;
}

/* 鉴定报告框样式调整 */
.result-box {
  padding: 30px;
  border-radius: 15px;
  position: relative;
  overflow: hidden;

  /* 渐变背景 */
  background: linear-gradient(135deg, #1c2827, #5e4b3c); /* 深绿色到深棕色的渐变 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
}

.result-box::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, transparent 0%, transparent 70%, rgba(255, 255, 255, 0.1) 100%);
  animation: rotate 20s linear infinite;
}

/* 鉴定报告标题 */
.report-title {
  font-size: 32px;
  font-weight: bold;
  color: #d4af37; /* 金色 */
  margin-bottom: 30px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: 'Playfair Display', serif;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

/* 预测图和标签解释统一放在一个棕色框内 */
.prediction-section {
  background-color: #5e4b3c; /* 深棕色背景 */
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
}

.prediction-section .image-title {
  margin-bottom: 10px;
  color: #fdf6e3; /* 淡色字体 */
}

.result-image {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
  position: relative;
  cursor: pointer;
  margin-bottom: 20px;
}

.result-image .preview-image {
  width: 100%;
  height: auto;
  object-fit: contain;
  animation: fadeIn 0.5s ease-in-out;
  border-radius: 10px;
}

.btn-download {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(212, 175, 55, 0.8); /* 半透明金色 */
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

.btn-download:hover {
  background-color: rgba(212, 175, 55, 1); /* 不透明金色 */
  transform: scale(1.1);
}

.btn-download svg {
  color: white;
}

/* 标签容器样式 */
.labels-container {
  margin-top: 20px;
  text-align: left;
  background: rgba(94, 75, 60, 0.8); /* 半透明棕色背景 */
  padding: 20px;
  border-radius: 10px;
}

.labels-container ul {
  list-style-type: none;
  padding: 0;
}

.labels-container li {
  margin-bottom: 15px;
  font-size: 18px;
  animation: fadeInUp 0.5s ease-in-out;
  display: flex;
  align-items: center;
}

.label-text {
  color: #2980b9;
  font-weight: bold;
  margin-right: 10px;
  flex-shrink: 0;
}

.label-explanation {
  color: #d4af37; /* 金色 */
  line-height: 1.5;
}

/* 添加图标到标签 */
.labels-container li::before {
  content: '✔';
  color: #27ae60;
  margin-right: 10px;
  font-size: 20px;
}

/* 模态框样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  overflow: hidden;
  border-radius: 10px;
  animation: zoomIn 0.3s ease-out;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
}

.modal-image {
  display: block;
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 10px;
}

.btn-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(212, 175, 55, 0.8); /* 半透明金色 */
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

.btn-close:hover {
  background-color: rgba(212, 175, 55, 1); /* 不透明金色 */
  transform: rotate(90deg);
}

.btn-close svg {
  color: #2e2e2e; /* 深色图标 */
}

/* 动画效果 */
@keyframes zoomIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>
